<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        header{
            height: 100px;
            background-color: orange;
            text-align: center;
            line-height: 100px;
        }
        div{
            height: 500px;
            background-color: blue;
            /*开启弹性布局*/
            display: flex;

            /*flex-direction: 控制布局方向,默认是row,横向从左到右*/
            flex-direction: row-reverse;

            /*控制横轴的换行方式: 默认是nowrap不换行;
            参考资料地址: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
            */
            /*flex-wrap: wrap-reverse;*/
            
        }
        div>section{
            height: 100%;
            background: peru;
            width: 33.3333333%;
            box-sizing: border-box;
            border: 2px solid red;
        }

        /*order 用来对容器内的子元素进行排序,默认从0开始.*/
        section:nth-child(1){
            order: 2;

            /*flex-grow: 用来瓜分剩余空间,默认为0:不占剩余空间;
            单个属性为1:
            所有属性为1:
            有1有2:
            */
            flex-grow: 1;
        }

        section:nth-child(2){
            order: 3;
            flex-grow: 2;

            /*设置当空间不足时,是否缩放.默认为1,0为不缩放.*/
            flex-shrink: 0;
            
        }

        section:nth-child(3){
            order: 1;
            flex-grow: 1;
        }

        section:nth-child(4){
            order: 0;
            flex-grow: 1;
        }

        



        footer{
            height: 100px;
            background-color: blue;
            text-align: center;
            line-height: 100px;
        }


    </style>
</head>
<body>
    <main>
        <header>
            导航栏
        </header>
        <div>
            <section>内容一</section>
            <section>内容二</section>
            <section>内容三</section>
            <section>内容四</section>


        </div>
        <footer>
            底栏
        </footer>
    </main>
</body>
</html>